import React, {Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Button,
  Input,
  Form,
  Dropdown,
  Menu,
  Icon,
} from 'antd';
import StandardTable from 'components/StandardTable';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import styles from '../TableList.less';

@connect(({ sysauth, loading }) => ({
  sysauth,
  loading: loading.models.sysauth,
}))
@Form.create()
export default class Demo extends React.Component {
  state = {
    selectedRows: [],
  };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysauth/fetch',
    });
  }
  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysauth/clear',
    });
  }



  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  }
  render() {
    const columns =
    [
      {
        title: '应用项目',
        dataIndex: 'name',
      },
      {
        title: '负责人',
        dataIndex: 'auth',
      },
      {
        title: '操作',
        render: () => (
          <Fragment>
            <a >指定</a>
          </Fragment>
        ),
      },
    ]
    const menu = (
      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
        <Menu.Item key="remove">删除</Menu.Item>
        <Menu.Item key="approval">批量审批</Menu.Item>
      </Menu>
    );
    const mainSearch = (
      <div style={{ textAlign: 'center' }}>
        <Input.Search
          placeholder="请输入"
          enterButton="搜索"
          size="large"
          onSearch={this.handleFormSubmit}
          style={{ width: 522 }}
        />
      </div>
    );
    const {sysauth:{data},loading} =  this.props;
    const { selectedRows} = this.state;
    return (

      <PageHeaderLayout
        title="应用权限"
        content={mainSearch}
      >
        <Card>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              {selectedRows.length > 0 && (
                <span>
                  <Button>批量操作</Button>
                  <Dropdown overlay={menu}>
                    <Button>
                      更多操作 <Icon type="down" />
                    </Button>
                  </Dropdown>
                </span>
              )}
            </div>
            <StandardTable
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              columns={columns}
              onSelectRow={this.handleSelectRows}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
